<template>
  <div>
    <el-card class="box-card">
      <el-table
        style="margin-bottom:20px"
        :header-cell-style="{background:'#eee'}"
        border
        :data="tableData"
      >
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" prop="name" label="盲盒名称"></el-table-column>
        <el-table-column align="center" prop="case_name" label="箱子名称"></el-table-column>
        <el-table-column align="center" label="奖励">
          <template slot-scope="scope">
            <div v-if="scope.row.type==1">开箱奖励</div>
            <div v-if="scope.row.type==2">阶段奖励</div>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="checkReward(scope.row)" type="text" size="small">查看奖品</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>
    <el-card v-if="showTest">
      <el-form :model="test" label-width="130px">
        <el-form-item label="测试一：">
          <el-input v-model="test.testOne" placeholder="请输入测试一"></el-input>
        </el-form-item>
        <el-form-item label="测试二：" v-if="showTest">
          <el-input v-model="test.testTwo" placeholder="请输入测试二"></el-input>
        </el-form-item>

        <el-form-item v-if="showTest">
          <el-button type="primary" @click="setTest">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 抽屉 -->
    <el-drawer title="奖品" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <el-table
        style="margin-bottom:20px"
        :header-cell-style="{background:'#eee'}"
        border
        :data="goodsData"
      >
        <el-table-column align="center" prop="id" label="ID"></el-table-column>
        <el-table-column align="center" prop="goods_name" label="奖品名称"></el-table-column>
        <el-table-column align="center" prop="rule_name" label="赏级名称"></el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import { userTX } from '@/api/consumer'
import store from '@/store/index'
import { setUserTest } from '@/api/consumer'
export default {
  props: {
    user_id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 分页数据
      test: {
        testOne: '',
        testTwo: ''
      },
      showTest: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      // 抽屉
      drawer: false,
      direction: 'rtl',
      goodsData: []
    }
  },
  mounted() {},
  created() {
    console.log(111111)
    if (store.getters.roles.includes('account')) {
      this.showTest = true
    } else {
      this.showTest = false
    }
  },
  watch: {
    user_id(newVal, oldVal) {
      // this.getUserTX()
    }
  },
  methods: {
    async setTest() {
      const res = await setUserTest({
        user_id: this.userId,
        test1: this.test.testOne,
        test2: this.test.testTwo
      })
      console.log(res)
      if (res.st == 1) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取优惠券列表
    async getUserTX() {
      const res = await userTX({
        user_id: this.user_id,
        page: this.currentPage,
        limit: this.pageSize
      })
      console.log(res)
      this.tableData = res.data
      this.total = res.count
    },
    queryAsk() {
      this.currentPage = 1
      this.getUserTX()
    },
    //重置
    queryReset() {
      this.resetForm('query')
      this.total = 0
      this.currentPage = 1
      this.pageSize = 10
      this.query.keywords = ''
      this.getUserTX()
    },

    //分页改变
    currentChange(current) {
      this.currentPage = current
      this.getUserTX()
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    checkReward(row) {
      this.drawer = true
      console.log(row)
      this.goodsData = row.goods_info
    },
    handleClose(done) {
      done()
    }
  }
}
</script>

<style lang='scss' scoped>
.box-card {
  margin-bottom: 20px;
}
.search {
  display: flex;
  align-items: center;
}
::v-deep .el-input {
  width: 292px;
  display: block;
  position: static !important;
}
::v-deep .el-input--medium .el-input__inner {
  width: 292px;
}

::v-deep .el-form-item__label {
  padding: 0 30px 0 0;
}
</style>